/*---清除浮动---*/
.clearfix() {
    position: relative;
    zoom: 1;
    &:after,
    &:before {
        display: table;
        content: '';
        line-height: 1;
    }
    &:after {
        clear: both;
    }
}
/* ---三角形(朝向上、右、下、左)-- */
.square(@_){
  width: 0;
  height: 0;
  overflow: hidden;
}
.square(T,@width:10px,@color:red){
    border-width: @width;
    border-style: dashed dashed dashed solid ;
    border-color:transparent transparent transparent @color ;
  }
.square(R,@width:10px,@color:red){
    border-width: @width;
    border-style: dashed solid dashed dashed ;
    border-color:transparent @color  transparent transparent ;
    }
.square(B,@width:10px,@color:red){
    border-width: @width;
    border-style: solid dashed dashed dashed;
    border-color: @color transparent transparent transparent;
  }
.square(L,@width:10px,@color:red){
    border-width: @width;
    border-style: solid dashed dashed dashed;
    border-color: @color transparent transparent transparent;
}
/* 3d transform-style*/
.transform-style(@perspective:1200){
  /*子元素开启3D模式*/
  transform-style: preserve-3d;
  /* 设置透视点*/
  perspective:@perspective;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
}

.transform(@rotateX:0,@rotateY:0,@rotateZ:0,@translateX:0, @translateY:0,@translateZ:0){
  /*动画完成后的状态*/ 
  transform: @rotateX @rotateY  @rotateZ  @translateX @translateY @translateZ ; 
  -webkit-transform:@rotateX  @rotateY  @rotateZ  @translateX @translateY  @translateZ ;
  -moz-transform: @rotateX  @rotateY  @rotateZ  @translateX @translateY  @translateZ ;  
  -o-transform: @rotateX  @rotateY  @rotateZ  @translateX @translateY  @translateZ ;  
        
}
/*** animation 动画****/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes  @name{
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}
